---
{
	"title": "Feeds",
	"language": "en",
	"category": "Plugins",
	"categoryfile": "plugins",
	"description": "Aggregates and displays entries from one or more Web feeds.",
	"altLangPrefix": "feeds",
	"dateModified": "2022-09-07"
}
---
<span class="wb-prettify all-pre hide"></span>

<section>
	<h2>Purpose</h2>
	<p>The purpose of this feature is to provides a widget for aggregating and displaying the entries from one or more Web feeds on a Web page. Supported Web feed formats are Atom, RSS, and Media RSS.</p>
</section>

<section>
	<h2>Use when</h2>
	<ul>
		<li>Promoting and sharing information from Web feeds on a Web page </li>
	</ul>
</section>

<section>
	<h2>Working example</h2>
	<ul>
		<li><a href="../../../demos/feeds/feeds-en.html">English working examples</a></li>
		<li><a href="../../../demos/feeds/feeds-fr.html">French working examples</a></li>
	</ul>
</section>

<section>
<h2>Evaluation and report</h2>
<ul>
	<li>Accessibility (SC WCAG 2.1/2.2 Level A &amp; AA)- <a href="../../../demos/feeds/reports/a11y-1-en.html">English Report</a></li>
	<li>Accessibility (SC WCAG 2.1/2.2 Level A &amp; AA)- <a href="../../../demos/feeds/reports/a11y-1-fr.html">French Report</a></li>
</ul>
</section>

<section>
	<h2>How to implement</h2>
	<ol>
		<li>For each area that will display Web feeds, create a <code>section</code> element with <code>class="wb-feeds"</code>.
			<pre><code>&lt;section class="wb-feeds"&gt;&lt;/section&gt;</code></pre>
		</li>
		<li>Inside the <code>section</code> element add a heading (<code>h1</code> - <code>h6</code>).</li>
		<li>Add an unordered list (<code>ul</code>) after the heading with the <code>feeds-cont</code> class.
			<ul>
				<li><strong>Flickr and YouTube feeds:</strong>
					<ol>
						<li>Add the <code>list-inline</code> class to the unordered list.</li>
						<li>Add <code>&lt;div class="clearfix"&gt;&lt;/div&gt;</code> after the unordered list.</li>
					</ol>
				</li>
			</ul>
		</li>
		<li>For every Web feed source to display, add a list element containing a link to the feed.
			<ul>
				<li><strong>Regular feeds:</strong>
					<pre><code>&lt;li&gt;
	&lt;a href="https://canada.ca/sample.atom"&gt;Sample Atom Feed&lt;/a&gt;
&lt;/li&gt;</code></pre>
				</li>
				<li><strong>Flickr feeds:</strong>
					<ol>
						<li>The link <code>href</code> attribute needs to contain the URL of the Flickr account's photostream.</li>
						<li>Add a <code>data-ajax</code> attribute to the link containing the URL of the <a href="https://www.flickr.com/services/feeds/">Flickr account JSON feed</a>.</li>
					</ol>
					<pre><code>&lt;li&gt;
	&lt;a href="https://www.flickr.com/photos/environmentcan" rel="external" data-ajax="https://api.flickr.com/services/feeds/photos_public.gne?id=47711201@N05&amp;amp;format=json"&gt;Environment Canada Flickr&lt;/a&gt;
&lt;/li&gt;</code></pre>
				</li>
				<li><strong>YouTube feeds:</strong>
					<ol>
						<li>The link <code>href</code> attribute needs to contain the URL of the YouTube account.</li>
						<li>Add a <code>data-ajax</code> attribute to the link with the URL of the YouTube account JSON feed.</li>
					</ol>
					<pre><code>&lt;li&gt;
	&lt;a href="https://www.youtube.com/user/ParksCanadaAgency" rel="external" data-ajax="https://gdata.youtube.com/feeds/api/users/UCzJRhTw3KVtDlcdNz33eDMQ/uploads?v=2&amp;amp;alt=json"&gt;Parks Canada Youtube&lt;/a&gt;
&lt;/li&gt;</code></pre>
				</li>
			</ul>
		</li>
		<li><strong>Optional:</strong> Group multiple types of feeds into a tabbed interface. The benefit of this approach is it will only load the feeds that are currently visible (significantly improves performance when there are lots of feeds).
			<ol>
				<li>Create a <code>div</code> element with <code>class="wb-tabs"</code>.</li>
				<li>Add a <code>div</code> element with <code>class="tabpanels"</code> within the previous <code>div</code> element.</li>
				<li>For each group of feeds (group feeds by type), add a <code>details</code> element. Add <code>open="open"</code> to the group of feeds that should be displayed by default.</li>
				<li>Add a <code>summary</code> element at the start of each <code>details</code> element with the name of the group of feeds (e.g., <code>&lt;summary&gt;Pinterest&lt;/summary&gt;</code>).</li>
				<li>Add the areas to display Web feeds after each <code>summary</code> element as described in steps 1 to 4, except add the <code>wb-inv</code> class to the heading for each area.</li>
			</ol>
			<pre><code>&lt;section&gt;
	&lt;h3&gt;Tabbed Social Feeds&lt;/h3&gt;
	&lt;div class="wb-tabs col-md-5 wb-eqht"&gt;
		&lt;div class="tabpanels"&gt;
		&lt;details id="details-pinterest" open="open"&gt;
			&lt;summary&gt;Pinterest&lt;/summary&gt;
				&lt;section class="wb-feeds limit-5"&gt;
					&lt;h4 class="wb-inv"&gt;Pinterestk&lt;/h4&gt;
					&lt;ul class="feeds-cont media-list"&gt;
						...
					&lt;/ul&gt;
					&lt;div class="clearfix"&gt;&lt;/div&gt;
				&lt;/section&gt;
			&lt;/details&gt;

			&lt;details id="details-flickr"&gt;
				&lt;summary&gt;Flickr&lt;/summary&gt;
				&lt;section class="wb-feeds limit-10"&gt;
					&lt;h4 class="wb-inv"&gt;Flickr&lt;/h4&gt;
					&lt;ul class="feeds-cont list-inline"&gt;
						...
					&lt;/ul&gt;
					&lt;div class="clearfix"&gt;&lt;/div&gt;
				&lt;/section&gt;
			&lt;/details&gt;

			&lt;details id="details-youtube"&gt;
				&lt;summary&gt;YouTube&lt;/summary&gt;
				&lt;section class="wb-feeds limit-10"&gt;
					&lt;h4 class="wb-inv"&gt;YouTube&lt;/h4&gt;
					&lt;ul class="feeds-cont list-inline"&gt;
						...
					&lt;/ul&gt;
					&lt;div class="clearfix"&gt;&lt;/div&gt;
				&lt;/section&gt;
			&lt;/details&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="clearfix"&gt;&lt;/div&gt;
&lt;/section&gt;</code></pre>
		</li>
	</ol>

	<section>
		<h3>Example code</h3>
		<section>
			<h4>Regular feeds</h4>
			<pre><code>&lt;section class="wb-feeds limit-5"&gt;
	&lt;h3&gt;Road News Releases and Safety Recalls&lt;/h3&gt;
	&lt;ul class="feeds-cont"&gt;
		&lt;li&gt;
			&lt;a href="https://www.tc.gc.ca/mediaroom/rss/road.xml" rel="external"&gt;Road News Releases (All)&lt;/a&gt;
		&lt;/li&gt;
		&lt;li&gt;
			&lt;a href="https://wwwapps.tc.gc.ca/Saf-Sec-Sur/7/VRDB-BDRV/search-recherche/rss.aspx?lang=eng" rel="external"&gt;Road Safety Recalls&lt;/a&gt;
		&lt;/li&gt;
	&lt;/ul&gt;
&lt;/section&gt;</code></pre>
		</section>

		<section>
			<h4>Flickr feeds</h4>
			<pre><code>&lt;section class="wb-feeds limit-15"&gt;
	&lt;ul class="feeds-cont list-inline"&gt;
		&lt;li&gt;
			&lt;a href="https://www.flickr.com/photos/environmentcan" rel="external" data-ajax="https://api.flickr.com/services/feeds/photos_public.gne?id=47711201@N05&amp;amp;format=json"&gt;Environment Canada Flickr&lt;/a&gt;
		&lt;/li&gt;
	&lt;/ul&gt;
	&lt;div class="clearfix"&gt;&lt;/div&gt;
&lt;/section&gt;</code></pre>
		</section>

		<section>
			<h4>YouTube feeds</h4>
			<pre><code>&lt;section class="wb-feeds limit-15"&gt;
	&lt;ul class="feeds-cont list-inline"&gt;
		&lt;li&gt;
			&lt;a href="https://www.youtube.com/user/ParksCanadaAgency" rel="external" data-ajax="https://gdata.youtube.com/feeds/api/users/UCzJRhTw3KVtDlcdNz33eDMQ/uploads?v=2&amp;amp;alt=json"&gt;Parks Canada Youtube&lt;/a&gt;
		&lt;/li&gt;
		&lt;li&gt;
			&lt;a href="https://www.youtube.com/user/fisheriescanada?feature=results_main" rel="external" data-ajax="https://gdata.youtube.com/feeds/api/users/UC5D1a5R8bbrTXEJrjmRX7gA/uploads?v=2&amp;amp;alt=json"&gt;Department of Fisheries and Oceans’ YouTube&lt;/a&gt;
		&lt;/li&gt;
	&lt;/ul&gt;
	&lt;div class="clearfix"&gt;&lt;/div&gt;
&lt;/section&gt;</code></pre>
		</section>

		<section>
			<h4>Tabbed feeds</h4>
			<pre><code>&lt;section&gt;
	&lt;h3&gt;Tabbed Social Feeds&lt;/h3&gt;
	&lt;div class="wb-tabs col-md-5 wb-eqht"&gt;
		&lt;div class="tabpanels"&gt;

		&lt;details id="details-flickr"&gt;
				&lt;summary&gt;Flickr&lt;/summary&gt;
				&lt;section class="wb-feeds limit-10"&gt;
					&lt;h4 class="wb-inv"&gt;Flickr&lt;/h4&gt;
					&lt;ul class="feeds-cont list-inline"&gt;
						&lt;li&gt;
							&lt;a href="https://www.flickr.com/photos/environmentcan" rel="external" data-ajax="https://api.flickr.com/services/feeds/photos_public.gne?id=47711201@N05&amp;amp;format=json"&gt;Environment Canada Flickr&lt;/a&gt;
						&lt;/li&gt;
					&lt;/ul&gt;
					&lt;div class="clearfix"&gt;&lt;/div&gt;
				&lt;/section&gt;
			&lt;/details&gt;

			&lt;details id="details-youtube"&gt;
				&lt;summary&gt;YouTube&lt;/summary&gt;
				&lt;section class="wb-feeds limit-10"&gt;
					&lt;h4 class="wb-inv"&gt;YouTube&lt;/h4&gt;
					&lt;ul class="feeds-cont list-inline"&gt;
						&lt;li&gt;
							&lt;a href="https://www.youtube.com/user/ParksCanadaAgency" rel="external" data-ajax="https://gdata.youtube.com/feeds/api/users/UCzJRhTw3KVtDlcdNz33eDMQ/uploads?v=2&amp;amp;alt=json"&gt;Parks Canada Youtube&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="https://www.youtube.com/user/fisheriescanada?feature=results_main" rel="external" data-ajax="https://gdata.youtube.com/feeds/api/users/UC5D1a5R8bbrTXEJrjmRX7gA/uploads?v=2&amp;amp;alt=json"&gt;Department of Fisheries and Oceans’ YouTube&lt;/a&gt;
						&lt;/li&gt;
					&lt;/ul&gt;
					&lt;div class="clearfix"&gt;&lt;/div&gt;
				&lt;/section&gt;
			&lt;/details&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="clearfix"&gt;&lt;/div&gt;
&lt;/section&gt;</code></pre>
		</section>
	</section>
</section>

<section>
	<h3 id="json-atom-like-feed">Converting ATOM XML feed into JSON ATOM like format</h3>
	<p>Here is the skeleton structure for the feed:</p>

	<pre><code>{
	"feed": {
		"entry": [
			{
				"title": "[Title of the entry]",
				"updated": "[UTC date format]",
				"link": "[URL]"
			},

			...
		]
	}
}</code></pre>
	<p>Notes:</p>
	<ul>
		<li>Replace <code>...</code> in each entry and remove the ending comas for the least entry.</li>
		<li>The Feed plugin would ignore any meta information added to describe the feed. However we recommend that your feed contains self-describing information.</li>
	</ul>

	<p>Alias for "Publication date" of each entry:</p>
	<ul>
		<li><code>publishedDate</code></li>
		<li><code>published</code></li>
		<li><code>pubDate</code></li>
		<li><code>updated</code></li>
	</ul>
	<p>Alias for "Link" of each entry:</p>
	<ul>
		<li><code>link</code></li>
		<li><code>href</code></li>
	</ul>
</section>

<section>
	<h2>Configuration options</h2>
	<p>These are the configuration options that can be used by implementers or developers.</p>
	<table class="table">
		<thead>
			<tr>
				<th>Option</th>
				<th>Description</th>
				<th>How to configure</th>
				<th>Values</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><code>limit-x</code></td>
				<td>Controls the amount of items the Web feeds widget will display.</td>
				<td>Add the <code>limit-x</code> class after the <code>wb-feeds</code> class and replace <code>x</code> with an integer.</td>
				<td>
					<dl>
						<dt>default (not specified)</dt>
						<dd>Display all the entries of the feeds</dd>
						<dt><code>limit-4</code>:</dt>
						<dd>Limits display to four items.</dd>
					</dl>
				</td>
			</tr>
			<tr>
				<td><code>data-cors="true"</code></td>
				<td>Allows cross-site requests to fetch ATOM  feed without using the Yahoo API services</td>
				<td>Add the attribute <code>data-cors="true"</code></td>
				<td>
					<dl>
						<dt>undefined (default)</dt>
						<dd>Use the Yahoo API service</dd>
						<dt><code>true</code></dt><dd>Retrieve directly the ATOM feed</dd>
					</dl>
				</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Events</h2>
	<p>These are the public events that can be used by implementers or developers.</p>
	<table class="table">
		<thead>
			<tr>
				<th>Event</th>
				<th>Trigger</th>
				<th>What it does</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><code>wb-init.wb-feeds</code></td>
				<td>Triggered manually (e.g., <code>$( ".wb-feeds" ).trigger( "wb-init.wb-feeds" );</code>).</td>
				<td>Used to manually initialize the Feeds widget. <strong>Note:</strong> The Feeds widget will be initialized automatically unless it is added after the page has already loaded.</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb-feeds</code> (v4.0.5+)</td>
				<td>Triggered automatically after the Feeds plugin has initialized.</td>
				<td>Used to identify where the Feeds plugin has finished initializing (target of the event).
					<pre><code>$( document ).on( "wb-ready.wb-feeds", ".wb-feeds", function( event ) {
});</code></pre>
					<pre><code>$( ".wb-feeds" ).on( "wb-ready.wb-feeds", function( event ) {
});</code></pre>
				</td>
			</tr>
			<tr>
				<td><code>wb-feed-ready.wb-feeds</code> (v4.0.5+)</td>
				<td>Triggered automatically after a feed has become visible.</td>
				<td>Used to identify which feed has become visible (target of the event).
					<pre><code>$( document ).on( "wb-feed-ready.wb-feeds", ".wb-feeds .feeds-cont", function( event ) {
});</code></pre>
					<pre><code>$( ".wb-feeds .feeds-cont" ).on( "wb-feed-ready.wb-feeds", function( event ) {
});</code></pre>
				</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb</code> (v4.0.5+)</td>
				<td>Triggered automatically when WET has finished loading and executing.</td>
				<td>Used to identify when all WET plugins and polyfills have finished loading and executing.
					<pre><code>$( document ).on( "wb-ready.wb", function( event ) {
});</code></pre>
				</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Source code</h2>
	<p><a href="https://github.com/wet-boew/wet-boew/tree/master/src/plugins/feeds">Feeds widget source code on GitHub</a></p>
</section>
